<script lang="ts">
export default {
  name: 'orderFrom',
  description: '订单表单',
};
</script>

<script setup lang="ts">
import MapContainer from '@/components/MapContainer.vue'
import { ElForm, ElMessage } from 'element-plus';
import type { TabsPaneContext } from 'element-plus';
import { OrderForm } from '@/api/order/types';
import {
  casualOrderAdd,
  typeOption,
  tagOption,
  firmOption,
  personOption,
  casualOrderEdit,
  listOrderItem,
  getByOrderId,
} from '@/api/order/index';
import { onMounted, reactive, ref, toRefs, getCurrentInstance } from 'vue';
import { el } from 'element-plus/es/locale';
const emit = defineEmits(['submitOk']);
const { proxy }: any = getCurrentInstance();
const dataFormRef = ref(ElForm);
const state = reactive({
  dialog: {
    title: '',
    visible: false,
  } as DialogType,
  formData: {} as OrderForm,
  rules: {
    name: [{ required: true, message: '请输入用工标题', trigger: 'change' }],
    typeId: [{ required: true, message: '请选择用工类型', trigger: 'change' }],
    labelIds: [
      { required: true, message: '请选择服务标签', trigger: 'change' },
    ],
    principalType: [
      { required: true, message: '请选择下单类型', trigger: 'change' },
    ],
    principal: [
      { required: true, message: '请选择下单名称', trigger: 'change' },
    ],
    address: [{ required: true, message: '请输入用工地址', trigger: 'change' }],
    orderQuantity: [
      { required: true, message: '请输入用工人数', trigger: 'change' },
    ],
    qdQuantity: [
      { required: true, message: '请输入抢单人数', trigger: 'change' },
    ],
    price: [{ required: true, message: '请输入单人日新', trigger: 'change' }],
    employmentDay: [{ required: true, message: '请输入用工天数', trigger: 'change' }],
    orderTime: [
      { required: true, message: '请选择用工时间', trigger: 'change' },
    ],
    description: [{ required: false, message: '请输入用工描述', trigger: 'change' }],
    remark: [{ required: false, message: '请输入详细描述', trigger: 'change' }],
  },
  typeOptions: [] as OptionType[],
  labelOptions: [] as OptionType[],
  principalOptions: [] as OptionType[],
  firmOptions: [] as OptionType[],
  personOptions: [] as OptionType[],
  disabled: false,
  labourData: [] as any,
  activeName: '1',
  activeNames: [],
  active: 0,
  dialogVisible:false,
  address:{
    address:'',
    name:'',
    district:'',
    lat:'',//维度
    lng:''//精度
  }
});
const {
  dialog,
  formData,
  rules,
  typeOptions,
  labelOptions,
  principalOptions,
  firmOptions,
  personOptions,
  disabled,
  labourData,
  activeName,
  activeNames,
  active,
  dialogVisible,
  address
} = toRefs(state);

defineExpose({
  dialog,
  formData,
  disabled,
  details,
});
//重载
function reset() {
  state.activeName = '1';
  state.activeNames = [];
  state.active = 0;
}
function details(row: any) {
  formData.value = {};

  formData.value = Object.assign({}, row);

  if (formData.value.id) {
    reset();
    typeChange(formData.value.typeId);
    getLabour(formData.value.id);
    if (formData.value.principalType == 1) {
      principalOptions.value = firmOptions.value;
    } else {
      principalOptions.value = personOptions.value;
    }
    formData.value.labelIds = row.labelIds.split(',');
    formData.value.orderTime = [row.orderStatr, row.orderEnd];
  }
}
function getLabour(id: number | string) {
  getByOrderId(id).then((res) => {
    res.data.forEach((el: any) => {
      listOrderItem(id, el.engineerId).then((res) => {
        el.item = res.data;
      });
    });
    state.labourData = res.data;
  });
}
function submitForm() {
  getDate();
  dataFormRef.value.validate((valid: any) => {
    if (valid) {
      let parmas = Object.assign({}, formData.value);
      delete parmas.orderTime
      if (formData.value.labelIds)
        parmas.labelIds = formData.value.labelIds.toString();
      if (formData.value.id) {
        casualOrderEdit(parmas).then(() => {
          dialog.value.visible = false;
          emit('submitOk');
          ElMessage.success('编辑成功');
        });
      } else {
        casualOrderAdd(parmas).then(() => {
          dialog.value.visible = false;
          emit('submitOk');
          ElMessage.success('新增成功');
        });
      }
    }
  });
}
function getAddress(e:any){
  address.value = e
  // mapContainer
}
function gpanduanAddress(){
  if (address.value.address) {
    formData.value.address = address.value.name
    formData.value.addressItem = address.value.address
    formData.value.longitude = address.value.lng + ''
    formData.value.latitude = address.value.lat + ''
    dialogVisible.value = false
  }else{
    ElMessage.warning('请选择地址');
  }
}
function cancel() {
  dialog.value.visible = false;
}
//获取字典
function getOption() {
  typeOption().then((res) => {
    typeOptions.value = res.data;
  });
  personOption().then((res) => {
    personOptions.value = res.data;
  });
  firmOption().then((res) => {
    firmOptions.value = res.data;
  });
}
//获取服务标签字典
function typeChange(value: any) {
  formData.value.labelIds = [];
  let parmas = {
    typeId: value,
  };
  tagOption(parmas).then((res) => {
    labelOptions.value = res.data;
  });
}
function getDate() {
  formData.value.orderStatr = '';
  formData.value.orderEnd = '';
  if (formData.value.orderTime && formData.value.orderTime.length == 2) {
    formData.value.orderStatr = proxy
      .$moment(formData.value.orderTime[0])
      .format('YYYY-MM-DD HH:mm');
    formData.value.orderEnd = proxy
      .$moment(formData.value.orderTime[1])
      .format('YYYY-MM-DD HH:mm');
  }
}
//下单名称切换
function statusChange(value: any) {
  formData.value.principal = '';
  if (value == 1) {
    principalOptions.value = firmOptions.value;
  } else {
    principalOptions.value = personOptions.value;
  }
}
onMounted(() => {
  getOption();
});
</script>

<template>
  <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" destroy-on-close @close="cancel">
    <div style="height:550px;overflow: overlay;">
      <el-tabs v-model="activeName">
        <el-tab-pane label="订单详情" name="1">
          <el-form ref="dataFormRef" :model="formData" :rules="rules" :disabled="disabled" label-width="110px">
            <el-form-item label="项目类型">
              <el-select v-model="formData.orderUpstreamType">
                <el-option label="上游" value="upstream" />
                <el-option label="缺编" value="vacancy" />
              </el-select>
            </el-form-item>
            <el-form-item label="用工类型" prop="typeId">
              <el-select v-model="formData.typeId" placeholder="请选择用工类型" @change="typeChange">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="formData.orderUpstreamType === 'upstream'" label="上游单位名称" prop="name">
              <el-input v-model="formData.upstreamName" placeholder="请输入上游单位名称" />
            </el-form-item>
            <el-form-item v-if="formData.orderUpstreamType === 'upstream'" label="上游金额" prop="name">
              <el-input v-model="formData.upstreamMoeny" placeholder="请输入上游金额" />
            </el-form-item>
            <el-form-item v-if="formData.orderUpstreamType === 'upstream'" label="需求人数" prop="name">
              <el-input v-model="formData.numberPeopleNeed" placeholder="请输入需求人数" />
            </el-form-item>
            <el-form-item v-if="formData.orderUpstreamType === 'upstream'" label="人均费用" prop="name">
              <el-input v-model="formData.perCapitaCost" placeholder="请输入人均费用" />
            </el-form-item>
            <el-form-item v-if="formData.orderUpstreamType === 'vacancy'" label="实际编制人数" prop="name">
              <el-input v-model="formData.actualEstablishment" placeholder="请输入实际编制人数" />
            </el-form-item>
            <el-form-item v-if="formData.orderUpstreamType === 'vacancy'" label="缺编人数" prop="name">
              <el-input v-model="formData.vacancy" placeholder="缺编人数" />
            </el-form-item>
            <el-form-item label="用工标题" prop="name">
              <el-input v-model="formData.name" placeholder="请输入用工标题" />
            </el-form-item>
            <el-form-item label="服务标签" prop="labelIds">
              <el-select v-model="formData.labelIds" placeholder="请选择服务标签" multiple>
                <el-option v-for="item in labelOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="下单类型" prop="principalType">
              <el-select v-model="formData.principalType" placeholder="下单类型" clearable @change="statusChange">
                <el-option :value="1" label="企业" />
                <el-option :value="0" label="个人" />
              </el-select>
            </el-form-item>
            <el-form-item label="下单名称" prop="principal">
              <el-select v-model="formData.principal" placeholder="请输入关键词选择下单名称">
                <el-option v-for="item in principalOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="下单账号" prop="principalAccountName">
              <el-input v-model="formData.principalAccountName" placeholder="请输入下单账号" />
            </el-form-item>
            <el-form-item label="用工地址" prop="address">
              <el-input v-model="formData.address" placeholder="请输入用工地址" readonly @click.native="dialogVisible = true" />
            </el-form-item>
            <el-form-item label="用工人数" prop="orderQuantity">
              <el-input type="number" v-model="formData.orderQuantity" placeholder="请输入用工人数" />
            </el-form-item>
            <el-form-item label="抢单人数" prop="qdQuantity">
              <el-input type="number" v-model="formData.qdQuantity" placeholder="请输入抢单人数" />
            </el-form-item>
            <el-form-item label="最小年龄" prop="startAge">
              <el-input type="number" v-model="formData.startAge" placeholder="请输入最小年龄" />
            </el-form-item>
            <el-form-item label="最大年龄" prop="endAge">
              <el-input type="number" v-model="formData.endAge" placeholder="请输入最大年龄" />
            </el-form-item>
            <el-form-item label="单人日薪" prop="price">
              <el-input type="number" v-model="formData.price" placeholder="请输入单人日薪" />
            </el-form-item>
            <el-form-item label="用工天数" prop="employmentDay">
              <el-input type="number" v-model="formData.employmentDay" placeholder="请输入用工天数" />
            </el-form-item>
            <el-form-item label="用工时间" prop="orderTime">
              <el-date-picker v-model="formData.orderTime" type="datetimerange" format="YYYY-MM-DD HH:mm" start-placeholder="用工开始时间" end-placeholder="用工结束时间" />
            </el-form-item>
            <el-form-item label="用工描述" prop="description">
              <el-input v-model="formData.description" type="textarea" placeholder="请输入用工描述" :autosize="{ minRows: 2, maxRows: 4 }" />
            </el-form-item>
            <el-form-item label="详细描述" prop="remark">
              <el-input v-model="formData.remark" type="textarea" placeholder="请输入详细描述" :autosize="{ minRows: 2, maxRows: 4 }" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="用工详情" name="2" v-if="disabled">
          <el-collapse v-model="activeNames">
            <el-collapse-item v-for="item in labourData" :key="item.id" :title="'名称：'+item.engineerName" :name="item.id">
              <el-steps direction="vertical" :active="item.item ? item.item.length : 0">
                <el-step v-for="(itemrow, index) in item.item" :key="index" :title="'第' + index + '天'">
                  <template v-slot:title>
                    <p>
                      日期：{{ itemrow.orderDate?itemrow.orderDate:'无' }}
                    </p>
                    <p>
                      备注：{{ itemrow.orderDesc?itemrow.orderDesc:'无' }}
                    </p>
                    <el-image v-for="(orderImgUrl, index) in itemrow.orderImgUrl" :key="index" style="width: 100px; height: 100px ;margin-left:10px" :src="orderImgUrl" fit="scale-down" :preview-src-list="[orderImgUrl]" :preview-teleported="true" hide-on-click-modal/>
                  </template>
                </el-step>
              </el-steps>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
      </el-tabs>
      <el-dialog
        v-model="dialogVisible"
        title="选择地址"
        width="70%"
      >
        <map-container ref="mapContainer" @getAddress ='getAddress'></map-container>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="gpanduanAddress">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="!disabled">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type='number'] {
  -moz-appearance: textfield;
}
</style>
